<template>
    <div class="setpwd-page">
        <div class="login-box">
			<div class="login-logo">
				<img src="../../assets/image/logo.png" alt="">
			</div>
			<div class="pwd-info">设置登录密码</div>
			<div class="input-form">
				<cube-input type="password" v-model="pwd" placeholder="请输入密码" :eye="eye"></cube-input>
			</div>
            <div class="login-btn">
                <button type="button" class="login-submit" @click="submit"><cube-loading v-show="loading"></cube-loading>确定</button>
            </div>
        </div>
    </div>
</template>

<style lang="stylus">
.setpwd-page{
    width 100%
    height 100%
    // background-image: linear-gradient(to bottom, #782be9, #6456fd)
	background:#fefefe;
    position relative
    display flex
    align-items center
    justify-content center
    .login-box{
        width 300px
        .pwd-info{
            font-size 14px 
            color #333
            margin-bottom 15px
        }
		.login-logo{
			img{
				display:block;
				width:80px;
				margin:0 auto;
			}
		}
        .input-form{
            // background rgba(69, 0, 170, 0.37)
			border-bottom:1px solid #e1e1e1;
            width 100%
            margin-bottom 10px
            display flex
            justify-content flex-start
            height 50px
            line-height 50px
            .cube-input{
				background:transparent;
				width:100%;
				.cube-input-field{
					color:#333;
				}
				&::after{
					border:0;
				}
			}
            .input-control{
                width 300px
                height 50px
                border 0
                outline none
                background transparent
                color #fff
                font-size 16px
                vertical-align top
                padding 0 10px
                &.code{
                    width 200px
                }
                &::-webkit-input-placeholder{
                    color #ffffff
                    font-size 16px
                }
            }
            .getcode{
                width 100px
                color #fff
                font-size 14px
                outline none 
                border 0
                background transparent
                position relative
                &:before{
                    display block
                    content ""
                    width 1px
                    height 20px
                    background #fff
                    position absolute
                    top 15px
                    left 0
                }
            }
        }
        .login-btn{
            width 90%
			margin:20px auto 0;
            .login-submit{
                color #ffffff
                background-image: linear-gradient(to bottom, #0392b7, #3563db)
                width 100%
                height 40px
                border-radius 5px
                border 0 
                outline none
                font-size 16px
                font-weight 800
                display flex
                align-items center
                justify-content center
                .cube-loading{
                    margin-right 10px
                }
            }
        }
		.pwdlogin{
			font-size:14px;
			color:#fff;
			display:flex;
			align-items:center;
			i{
				margin-right:5px;
				font-size:16px;
			}
		}
	}
}
</style>

<script>
import {mapGetters} from 'vuex'
export default {
    data(){
        return {
			oldpwd:'',
            pwd:"",
			eye:{
				open: false,
				reverse: false
			},
            flag:true,
            codetext:'获取验证码',
            loading:false,
            loginfag:true
        }
    },
    computed:{
        ...mapGetters([
            'getAre'
        ])
    },
    watch:{
        username(val){
            this.phone = this.username;
        }
    },
    methods:{
        submit(){
            if(!this.pwd){
                this.createToast('密码不能为空','error')
                return;
            }
            if(!this.loginfag) return;
            this.loginfag = false;
            this.loading = true;
            this.$http.get(`/MyInfo/updatePwd`,{
                pwd:this.pwd
            }).then( res => {
                console.log(res)
                if(res.code == 200){
					if(this.oldpwd){
						this.createToast(res.msg,'correct')
						this.oldpwd = ''
						this.pwd = ''
					}else{
						this.$router.push('/')
					}
                }else{
                    this.createToast(res.msg,'error')
                }
                this.loginfag = true;
                this.loading = false;
            })
        },
        createToast(text,type){
            const toast = this.$createToast({
                time: 1000,
                txt: text,
                type:type
            })
            toast.show()
        }
    }
}
</script>
